
<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
    <ol class="breadcrumb mt-3">
        <strong>当前位置:</strong>
        <li class="breadcrumb-item"><a href="#" class="text-decoration-none link-dark">管理中心</a></li>
        <li class="breadcrumb-item"><a href="#" class="text-decoration-none link-dark">用户管理</a></li>
        <li class="breadcrumb-item active" aria-current="page">用户角色</li>
    </ol>
</nav>
<div class="input-group mb-3 w-50 mx-auto">
    <input id="input-search-role" type="text" class="form-control" placeholder="输入用户昵称"
           aria-describedby="btn-search-role">
    <button class="btn btn-primary" type="button" id="btn-search-role">搜索</button>
</div>

<!--模态框-->
<div class="modal fade" id="modal-role" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">修改用户角色</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3 row">
                    <label for="modal-userCode" class="col-sm-2 col-form-label">用户ID</label>
                    <div class="col-sm-10">
                        <input id="modal-userCode" type="text" class="form-control">
                    </div>
                </div>
                <div class="mb-3 row">
                    <label for="modal-select" class="col-sm-2 col-form-label">角色</label>
                    <div class="col-sm-10">
                        <select id="modal-select" class="form-control form-select">
                            <option>游客</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button id="modal-sure" type="button" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>
<!--动态渲染加载图标-->
<div id="admin-user-center-placeholder" class="row d-flex justify-content-center"></div>

<div class="container col-md-10">
    <!--批量操作按钮-->
    <div style="text-align: right">
        <button class="btn btn-warning ml-auto" onclick="renderModalBySelected()" data-bs-toggle="modal" data-bs-target="#modal-role">批量编辑</button>
    </div>
    <table class="table table-bordered text-center">
        <h6 id="textShowResult" class="text-dark">共0条结果</h6>
        <thead class="table-light">
        <tr>
            <td style="width: 5%"><input id="cb_all" type="checkbox" style="width: 20px; height: 20px">全选</td>
            <td style="width: 10%;">用户ID</td>
            <td style="width: 10%;">用户账号</td>
            <td style="width: 10%;">用户昵称</td>
            <td style="width: 10%;">用户头像</td>
            <td style="width: 10%;" hidden>角色ID</td>
            <td style="width: 10%;">
                <div class="dropdown">
                    <a class="btn btn-light dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
                        角色
                    </a>
                    <ul id="admin-user-role-dropdown-entry" class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                    </ul>
                </div>
            </td>
            <td style="width:20%">操作</td>
        </tr>
        </thead>
        <tbody id="admin-card-user-list-entry">
        </tbody>
    </table>
</div>

<!-- 结果通过动态渲染-->
<nav id="admin-card-user-pages-entry" class="Page navigation mb-0"></nav>